"use client";

import { useState, useEffect } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Check, Palette, Moon, Sun } from "lucide-react";
import { themes, getCurrentTheme, setCurrentTheme } from "@/lib/themes";

export default function ThemesPage() {
  const [currentTheme, setCurrentThemeState] = useState<string>("default");
  const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    const theme = getCurrentTheme();
    setCurrentThemeState(theme);
    
    // 检查当前是否为深色模式
    setIsDark(document.documentElement.classList.contains('dark'));
  }, []);

  const handleThemeChange = (themeName: string) => {
    setCurrentTheme(themeName);
    setCurrentThemeState(themeName);
  };

  const toggleDarkMode = () => {
    const newDarkMode = !isDark;
    setIsDark(newDarkMode);
    document.documentElement.classList.toggle('dark', newDarkMode);
    
    // 重新应用当前主题以更新深色模式颜色
    const theme = themes.find(t => t.name === currentTheme);
    if (theme) {
      const colors = newDarkMode ? theme.colors.dark : theme.colors.light;
      Object.entries(colors).forEach(([property, value]) => {
        document.documentElement.style.setProperty(property, value);
      });
    }
  };

  return (
    <div className="space-y-6">
      {/* 页面标题 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-foreground">主题设置</h1>
          <p className="text-muted-foreground">选择您喜欢的主题配色方案</p>
        </div>
        <Button onClick={toggleDarkMode} variant="outline" className="gap-2">
          {isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
          {isDark ? "浅色模式" : "深色模式"}
        </Button>
      </div>

      {/* 当前主题信息 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Palette className="h-5 w-5" />
            当前主题
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex items-center gap-4">
            <Badge variant="secondary" className="text-lg px-4 py-2">
              {themes.find(t => t.name === currentTheme)?.label || "默认主题"}
            </Badge>
            <div className="flex gap-2">
              <div
                className="w-6 h-6 rounded border-2 border-border"
                style={{ 
                  backgroundColor: themes.find(t => t.name === currentTheme)?.colors[isDark ? 'dark' : 'light']['--primary'] || '#8b5cf6' 
                }}
              />
              <div
                className="w-6 h-6 rounded border-2 border-border"
                style={{ 
                  backgroundColor: themes.find(t => t.name === currentTheme)?.colors[isDark ? 'dark' : 'light']['--secondary'] || '#f3f0ff' 
                }}
              />
              <div
                className="w-6 h-6 rounded border-2 border-border"
                style={{ 
                  backgroundColor: themes.find(t => t.name === currentTheme)?.colors[isDark ? 'dark' : 'light']['--accent'] || '#dbeafe' 
                }}
              />
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 主题列表 */}
      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        {themes.map((theme) => (
          <Card 
            key={theme.name}
            className={`cursor-pointer transition-all hover:shadow-lg ${
              currentTheme === theme.name
                ? "ring-2 ring-primary"
                : "hover:ring-1 hover:ring-primary/50"
            }`}
            onClick={() => handleThemeChange(theme.name)}
          >
            <CardHeader>
              <div className="flex items-center justify-between">
                <CardTitle className="text-lg">{theme.label}</CardTitle>
                {currentTheme === theme.name && (
                  <Check className="h-5 w-5 text-primary" />
                )}
              </div>
              <CardDescription>{theme.description}</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              {/* 主题预览 */}
              <div className="space-y-2">
                <div className="flex gap-2">
                  <div
                    className="w-8 h-8 rounded border-2 border-border"
                    style={{ backgroundColor: theme.colors.light["--primary"] }}
                  />
                  <div
                    className="w-8 h-8 rounded border-2 border-border"
                    style={{ backgroundColor: theme.colors.light["--secondary"] }}
                  />
                  <div
                    className="w-8 h-8 rounded border-2 border-border"
                    style={{ backgroundColor: theme.colors.light["--accent"] }}
                  />
                  <div
                    className="w-8 h-8 rounded border-2 border-border"
                    style={{ backgroundColor: theme.colors.light["--muted"] }}
                  />
                </div>
                <div className="flex gap-2">
                  <div
                    className="w-8 h-8 rounded border-2 border-border"
                    style={{ backgroundColor: theme.colors.dark["--primary"] }}
                  />
                  <div
                    className="w-8 h-8 rounded border-2 border-border"
                    style={{ backgroundColor: theme.colors.dark["--secondary"] }}
                  />
                  <div
                    className="w-8 h-8 rounded border-2 border-border"
                    style={{ backgroundColor: theme.colors.dark["--accent"] }}
                  />
                  <div
                    className="w-8 h-8 rounded border-2 border-border"
                    style={{ backgroundColor: theme.colors.dark["--muted"] }}
                  />
                </div>
              </div>

              {/* 颜色信息 */}
              <div className="grid grid-cols-2 gap-2 text-xs">
                <div>
                  <div className="font-medium mb-1">浅色模式</div>
                  <div className="space-y-1">
                    <div className="flex items-center gap-1">
                      <div
                        className="w-3 h-3 rounded"
                        style={{ backgroundColor: theme.colors.light["--primary"] }}
                      />
                      <span>主色: {theme.colors.light["--primary"]}</span>
                    </div>
                    <div className="flex items-center gap-1">
                      <div
                        className="w-3 h-3 rounded"
                        style={{ backgroundColor: theme.colors.light["--background"] }}
                      />
                      <span>背景: {theme.colors.light["--background"]}</span>
                    </div>
                  </div>
                </div>
                <div>
                  <div className="font-medium mb-1">深色模式</div>
                  <div className="space-y-1">
                    <div className="flex items-center gap-1">
                      <div
                        className="w-3 h-3 rounded"
                        style={{ backgroundColor: theme.colors.dark["--primary"] }}
                      />
                      <span>主色: {theme.colors.dark["--primary"]}</span>
                    </div>
                    <div className="flex items-center gap-1">
                      <div
                        className="w-3 h-3 rounded"
                        style={{ backgroundColor: theme.colors.dark["--background"] }}
                      />
                      <span>背景: {theme.colors.dark["--background"]}</span>
                    </div>
                  </div>
                </div>
              </div>

              <Button 
                variant={currentTheme === theme.name ? "default" : "outline"}
                className="w-full"
                onClick={(e) => {
                  e.stopPropagation();
                  handleThemeChange(theme.name);
                }}
              >
                {currentTheme === theme.name ? "当前主题" : "应用主题"}
              </Button>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* 使用说明 */}
      <Card>
        <CardHeader>
          <CardTitle>使用说明</CardTitle>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="grid gap-4 md:grid-cols-2">
            <div>
              <h4 className="font-medium mb-2">主题切换</h4>
              <ul className="text-sm text-muted-foreground space-y-1">
                <li>• 点击主题卡片可以预览和应用主题</li>
                <li>• 主题设置会自动保存到本地存储</li>
                <li>• 支持浅色和深色模式切换</li>
                <li>• 所有页面都会应用选定的主题</li>
              </ul>
            </div>
            <div>
              <h4 className="font-medium mb-2">主题特点</h4>
              <ul className="text-sm text-muted-foreground space-y-1">
                <li>• 完全响应式设计</li>
                <li>• 支持所有 shadcn/ui 组件</li>
                <li>• 自动适配深色模式</li>
                <li>• 平滑的过渡动画</li>
              </ul>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
} 